import { FC, useEffect, useState, ChangeEvent } from 'react'
import { Modal, Table, Radio, Input, message, Divider } from 'antd'
import type { RadioChangeEvent } from 'antd'
import produce from 'immer'
import { Location } from 'history-with-query'
import { Dispatch, AccountModelState, connect, ReviewInfoType } from 'umi'
interface IProps {
  dispatch: Dispatch
  visible: boolean
  accountModel: AccountModelState
  hide: () => any
  location: Location
}
const DistributionPage: FC<IProps> = ({
  visible,
  dispatch,
  accountModel,
  hide,
  location
}) => {
  const { batchCode, status } = location.query as {
    batchCode: string
    status: string
  }
  const [dataSource, setDataSource] = useState<any[]>([])
  const { gradeInfo } = accountModel
  const [type, setType] = useState<string>('1')
  const handleCount = (
    e: ChangeEvent<HTMLInputElement>,
    index: number,
    key: string
  ) => {
    setDataSource(
      produce((draft) => {
        draft[index][key] = e.target.value
      })
    )
  }

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (text: Text, record: ReviewInfoType, index: number) => {
        return <span>{(index + 1).toString().padStart(2, '0')}</span>
      }
    },
    {
      title: '学段名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '账号数量',
      dataIndex: 'count',
      key: 'count',
      render: (text: string, record: ReviewInfoType, index: number) => {
        return (
          <Input
            placeholder="请输入账号数量"
            onChange={(e) => handleCount(e, index, 'count')}
            value={record.count}
            disabled={status == '4'}
          />
        )
      }
    },
    {
      title: '仲裁账号数量',
      dataIndex: 'finalCount',
      key: 'finalCount',
      render: (text: string, record: ReviewInfoType, index: number) => {
        return (
          <Input
            placeholder="请输入账号数量"
            onChange={(e) => handleCount(e, index, 'finalCount')}
            value={record.finalCount}
            disabled={status == '4'}
          />
        )
      }
    }
  ]

  //  改变生成方式
  const onCnage = (e: RadioChangeEvent) => {
    setType(e.target.value)
    if (e.target.value == '2') {
      setDataSource([{ code: '', name: '全部' }])
    }
  }

  // 批次学段信息
  const getBatchGradeInfo = () => {
    dispatch({
      type: 'accountModel/function_getBatchGradeInfo',
      payload: {
        batchCode
      }
    })
  }

  const handleCancel = () => {
    hide()
  }

  const handleOk = () => {
    if (status == '4') {
      hide()
      return
    }
    dispatch({
      type: 'accountModel/function_createReviewerInfo',
      payload: {
        batchCode,
        json: JSON.stringify(
          dataSource.map((item) => ({
            code: item.code,
            count: item.count,
            finalCount: item.finalCount
          }))
        )
      },
      callback: (response) => {
        if (response.code == 200) {
          message.success('账号分配成功')
          handleCancel()
        }
      }
    })
  }

  useEffect(() => {
    if (visible && type === '1') {
      getBatchGradeInfo()
    }
  }, [visible, type])

  useEffect(() => {
    if (gradeInfo.length && type === '1') {
      setDataSource(gradeInfo)
    }
  }, [gradeInfo, type])
  return (
    <>
      <Modal
        title="账号分配设置"
        open={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width="68%"
        okText="确认"
        cancelText="取消"
      >
        <Radio.Group value={type} onChange={onCnage}>
          <Radio value="1">按学段生成</Radio>
          <Radio value="2">不按学段生成</Radio>
        </Radio.Group>
        <Divider />
        <Table dataSource={dataSource} columns={columns} rowKey="code" />
      </Modal>
    </>
  )
}

const mapStateToProps = ({
  accountModel
}: {
  accountModel: AccountModelState
}) => {
  return {
    accountModel
  }
}

export default connect(mapStateToProps)(DistributionPage)
